<template>
<!-- Main content -->
<div>
    <div class="row">
        <div class="col-xs-12">
            <theme-box title="标签列表">
                <form class="form-inline" @submit.prevent v-el:form>
                    <form-select title="标签类型" :sreach="true" :up-table="true" :options="labelOptions" name="labelType"></form-select>
                    <form-input title="标签名称" :up-table="true" name="labelName" id="labelName"></form-input>

                    <button type="reset" @click="reset" class="btn btn-warning pull-right">重置</button>
                    <v-button theme="primary" @click="search" class="pull-right">查询</v-button>
                </form>
                <table class="table table-bordered table-striped" style="width:100%" v-el:table>
                </table>
            </theme-box>
        </div>
        <!-- /.col -->
    </div>
    <modal-container title="编辑" v-el:modal v-ref:modal class="edit-modal" theme="small_window">
        <form @submit.prevent @reset.prevent v-el:mform>
            <div class="modal-body">
                <table-modal :item="item" :columns-set="columnsSet" :columns-num="1"></table-modal>
            </div>

            <div class="modal-footer">
                <v-button class="pull--left" data-dismiss="modal" @click="resetBindDrag">关闭</v-button>
                <v-button theme="primary" type="submit">保存</v-button>
            </div>
        </form>

    </modal-container>
    <!-- /.row -->
</div>
<!-- /.content -->
</template>

<style lang="less" scoped>
.form-inline .btn+.btn {
    margin-right: 10px;
}
.form-inline .form-group+.form-group {
    margin-left: 20px;
}
.form-inline #labelName{
    margin-left:2%!important;
}
</style>
<script>
import {
    dateTime,
    createDataTable
} from 'ui/collections/general.js'
var serialize = require('form-serialize');
import {dateFormat} from "lib/method.js"

var dataTable;
var columnsSet;
export default {
    data: () => ({
        item: {},
        columnsSet: [],
        labelOptions: [{
            key: "首页搜索",
            value: "0"
        }]
    }),
    methods: {
        //还原弹出框位置
        resetBindDrag() {
            this.$refs.modal._resetBindDrag();
        },
        //查询按钮
        search: function() {
            dataTable.ajax.reload();
        },
        //重置按钮
        reset: function() {
            $(".form-inline")[0].reset();
            dataTable.ajax.reload();
        }
    },
    created() {
        //datatable所用数组
        columnsSet = [{
            title: "编号",
            data: "labelId",
            edit: true,
            readonly:true,
            className: "operate"
        }, {
            title: "名称",
            data: "labelName",
            edit: true,
            className: "operate"
        }, {
            title: "类型",
            data: "labelType",
            options: [{key:"首页搜索",value:"0"}],
            className: "operate",
            render: function(data) {
    					return (data == 0) ? "首页搜索" : ""
    				}
        },
         {
            title: "创建时间",
            data: "crtTime",
            // datetime: true,
            className: "operate",
            render:function(data){
              return dateFormat(data)
            }
        },
        {
            title: "相关操作",
            className: "operate",
            width: "160px",
            render: function(value, type, row) {
              return `
                      <button type="button" class="btn btn-primary btn-sm edit">编辑</button>
                      <button type="button" class="btn btn-danger btn-sm delete">删除</button>
                      `
            }
        }]
    },
    ready: async function() {
        dateTime({
            format: "yyyy-mm-dd",
            minView: "2"
        })
        this.$set("columnsSet", columnsSet)
        var self = this;
        //创建dataTable
          dataTable = $(this.$els.table).DataTable({
            "columns": this.columnsSet, //定义列
            "ajax": async function(data, callback, settings) {
                var page = [{
                    "name": "iDisplayStart",
                    "value": 1 + data.start / data.length
                }, {
                    "name": "iDisplayLength",
                    "value": data.length
                }];
                //表单序列化数据
                var _data = serialize(self.$els.form, {
                    hash: true,
                    disabled: true,
                    empty: true
                });
                _data.aoData = JSON.stringify(page);
                //发送请求
                var result = await self.$post({
                    url: "/api/v1" + projectName_Url + "/plat/label/query",
                    data:_data,
                    method: "POST"
                })
                if (result.respCode != "00") {
                    Midway.alert({
                        title: "操作失败",
                        content: result.content
                    })
                }
                callback({
                    recordsTotal: result.content.total,
                    recordsFiltered: result.content.total,
                    data: result.content.result || []
                })
            }
        });


        $(self.$el).on("click", ".edit", function() {
            var Row = $(this).closest('tr').get(0);
            const dataArray = JSON.parse(JSON.stringify(dataTable.row(Row).data()));
            self.item = dataArray;
            dateTime()
            //编辑框验证、保存、提交
            $(self.$els.mform).validate(self.item.valdate = {
                async submitHandler() {
                    var form = self.$els.mform;
                    var _data = serialize(form, { hash: true, disabled:true, empty:true });
                    // return flase
                    var result = await self.$post({
                        url: "/api/v1" + projectName_Url + "/plat/label/"+ _data.labelId,
                        data: _data,
                        method: "PUT"
                    });
                    Midway.alert({title:"操作提示",content:result.errorInfo})
                    
                    dataTable.ajax.reload(null, false);
                    $(self.$els.modal).modal('hide');
                    self.resetBindDrag()
                },
                  rules: {
                    labelId: {
                        required: true,
                        disabled: true
                    },
                  labelName: {
                        required: true,
                        maxlength:5
                    },
                    labelType: {
                        required: true,
                        maxlength:1

                    },
                    crtTime: {
                        required: true
                        // maxlength:14
                    }
                }
            });
            $(self.$els.modal).modal('show');
        });

        $(self.$el).on("click", ".delete", async function() {
            var Row = $(this).closest('tr').get(0);
            var labelName = dataTable.row(Row).data().labelName;
            var id = dataTable.row(Row).data().labelId;

            await Midway.confirm({
                title: "删除标签",
                content: "是否要删除标签:" + labelName + "?"
            })
            var result = await self.$post({
              url: "/api/v1" + projectName_Url + "/plat/label/"+id,
              method: "DELETE"
            });
            Midway.alert({title: "操作提示", content: result.errorInfo})
            dataTable.ajax.reload();
        });
    },
    beforeDestroy() {
        $(this.$el).off("click")
    }
}
</script>
